<template>
    <div class="markdown-body">
        <div v-html="compiledMarkdown"></div>
    </div>
</template>

<script>
    let marked = require('marked');
    let hljs = require('highlight.js');
    import 'highlight.js/styles/default.css';
    import 'github-markdown-css'

    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: true,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code, lang) {
            if (lang && hljs.getLanguage(lang)) {
                return hljs.highlight(lang, code, true).value;
            } else {
                return hljs.highlightAuto(code).value;
            }
        }
    });

    export default {
        name: "MarkedContent",
        props : {
          mdString : {
              type : String,
              default : ''
          }
        },
        computed:{
            compiledMarkdown(){
                let htmlContent = this.mdString;
                return marked(htmlContent || '', {
                    sanitize: false
                });
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>